<%@page import="java.util.HashMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="${pageContext.request.contextPath }/common/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/common/css/bootstrap-theme.min.css" >
<script src="${pageContext.request.contextPath }/common/js/bootstrap.min.js" ></script>
<script src="${pageContext.request.contextPath }/common/js/jquery-2.1.1.min.js"></script>

<script type="text/javascript">

var num = ${myInfo.no};

$(function(){
	$.ajax({
		type : "GET",
		url : "/Test06/getJsonUserList.do?num="+num,
		data : num,
		dataType : "json",	
		success : function(args){
		var output1 = "";
		var output2 = "";
		var index = 0;
		
		if(args.relList == ""){
			for(var i=0; i<args.userList.length; i++) {
				if(num != args.userList[i].no){
				     output1 += '<tr><td>'+args.userList[i].name+'</td>'
						 	 +  '<td>'+args.userList[i].address+'</td>'
						 	 +  '<td>'+args.userList[i].birth+'</td>'
						 	 +  '<td>'+args.userList[i].email+'</td>'
						 	 +  '<td><input type="button" id="f_btn" onclick="following('+args.userList[i].no+', '+(index++)+')"></td></tr>';
		
				}
			}
			$(".table").append(output1);
			$("table tbody tr:gt("+0+")").attr("class", "members");
			$(".members input[type=button]").attr("value", "Follow");
			$(".members input[type=button]").mouseenter(function(){
				$(this).css("color", "red");
			});
			$(".members input[type=button]").mouseleave(function(){
				$(this).css("color", "black");
			});
			
		}
		
		if(args.relList != ""){
			for(var i=0; i<args.userList.length; i++) {
				if(num != args.userList[i].no){
					 output2 += '<tr><td>'+args.userList[i].name+'</td>'
						 	 +  '<td>'+args.userList[i].address+'</td>'
						 	 +  '<td>'+args.userList[i].birth+'</td>'
						 	 +  '<td>'+args.userList[i].email+'</td>'
				
				for(var j=0; j<args.relList.length; j++) {
					if(args.userList[i].no == args.relList[j].followingNo){
						var fnum = args.relList[j].followingNo;
						}
					}
					if(args.userList[i].no == fnum){
						output2 += '<td><input type="button" id="f_btn" onclick="following('+args.userList[i].no+', '+(index++)+')" value="UnFollow"></td></tr>';
						}
					if(args.userList[i].no != fnum){
						output2 += '<td><input type="button" id="f_btn" onclick="following('+args.userList[i].no+', '+(index++)+')" value="Follow"></td></tr>';
						}
					}
			
				}
		
			$(".table").append(output2);
			$("table tbody tr:gt("+0+")").attr("class", "members");
			$(".members input[type=button]").mouseenter(function(){
				$(this).css("color", "red");
			});
			$(".members input[type=button]").mouseleave(function(){
				$(this).css("color", "black");
			});
			}
				
		}
		,error:function(e) {
			alert(e.responseText);
		}
	});
	
});
function following(num, idx){
	var index = idx;
	
	if($(".members input[type=button]").eq(index).val() == "UnFollow"){
			$(".members input[type=button]").eq(index).removeAttr("value");
			$(".members input[type=button]").eq(index).attr("value", "Follow");
			$.get("cancelFollowing.do", {num : num});
			return;
		}
	if($(".members input[type=button]").eq(index).val() == "Follow"){
			$(".members input[type=button]").eq(index).removeAttr("value");
			$(".members input[type=button]").eq(index).attr("value", "UnFollow");
			$.get("addFollowing.do", {num : num});
			return;
		
		};
	
	};
</script>
<title>User List</title>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
	<ul class="nav navbar-nav">
		<li class="active"><a href="${pageContext.request.contextPath }/readWritingLists.do">Home</a></li>
		<li class="active"><a href="${pageContext.request.contextPath }/allUserList.do">Member</a></li>
		<li><a href="#">Community</a></li>
		<li class="">
	</ul>
	 <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="button" class="btn btn-default">Submit</button>
      </form>
		<div class="navbar-right" style="padding-top: 10px;"><font color="white">${myInfo.name }様</font>&nbsp;&nbsp;
			<a href="logOut.do"><input type="button" class="btn btn-xs btn-default" name="log_out" value="log out"></a>
			<a href="myInfo.do?name=${myInfo.name}"><input type="button" class="btn btn-xs btn-default" name="my_info" value="my info"></a>
		</div>
  </div><!-- container -->
</nav><!-- navbar -->
  <div class="container col-md-6 col-md-offset-3">
	<p><h3>All User List</h3></p>
	<table class="table table-condensed">
		<tr class="success">
			<td><b>Name</b></td>
			<td><b>Address</b></td>
			<td><b>Birth</b></td>
			<td><b>Email</b></td>
			<td><b>Follow</b></td>
		</tr>
		
	</table>
  </div>
</body>
</html>